import { saveUserInfo } from '@features/userInfoSlice.ts'
import req from '@utils/request'
import { Button, Input, Space, message } from 'antd'
import { useState } from 'react'
import { useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'

import './index.less'

const loginApiName = '/user/doLogin'

const Login = () => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const navigate = useNavigate()
  const dispatch = useDispatch()

  const handleUsernameChange = (e) => {
    setUsername(e.target.value)
  }

  const handlePasswordChange = (e) => {
    setPassword(e.target.value)
  }

  const getUserInfo = async (loginId) => {
    req(
        {
          method: 'post',
          url: '/user/getUserInfo',
          data: {
            userName: loginId
          }
        },
        '/auth'
    ).then(res => {
      if (res?.success && res?.data) {
        dispatch(saveUserInfo(res.data))
      }
    })
  }

  const doLogin = () => {
    if (!username || !password) {
      message.error('用户名和密码不能为空')
      return
    }

    req(
        {
          method: 'post',
          url: loginApiName,
          data: {
            username,
            password
          }
        },
        '/auth'
    ).then(async res => {
      if (res.success && res.data) {
        message.success('登录成功')
        localStorage.setItem('userInfo', JSON.stringify(res.data))
        await getUserInfo(res.data.loginId)
        setTimeout(() => {
          navigate('/question-bank')
        }, 500)
      } else {
        message.error('登录失败，请重试')
      }
    })
  }

  return (
      <div className='login-box'>
        <div className='login-container-inner'>
          <div className='notes'>
            <p>欢迎登录</p>
            <p>请使用您的用户名和密码登录</p>
          </div>
          <div className='qrcode-box'>
            <div className='qrcode-desc'>
              <p>微信扫码关注公众号</p>
              <p>公众号发送 “验证码”开启加薪之路</p>
            </div>
            <div className='qrcode-form'>
              <Space direction='vertical'>
                <Input
                    placeholder='用户名'
                    onChange={handleUsernameChange}
                    value={username}
                />
                <Input
                    type='password'
                    placeholder='密码'
                    onChange={handlePasswordChange}
                    value={password}
                />
                <Button type='primary' ghost onClick={doLogin}>
                  登录
                </Button>
              </Space>
            </div>
          </div>
        </div>
      </div>
  )
}

export default Login